<!-- 学社 - 成员 - 成员管理主页 -->
<template>
  <view>
    <z-paging-list ref="list" v-model="state.list" :safe-area-inset-bottom="false" @loadData="loadData"
      :hide-empty-view="true">
      <template #top>
        <z-navbar title="管理" :border-bottom="true" bg-color="#F4AE20"></z-navbar>
      </template>
      <view class="pt-5">
        <!-- 成员 -->
        <view class="px-4">
          <scroll-view class="whitespace-nowrap w-full" scroll-x :show-scrollbar="false">
            <view class="scroll-view-item" v-for="(item, index) in state.detailData?.member_list" :key="index">
              <view class="h-full flex flex-col justify-center items-center">
                <view class="relative">
                  <u-image shape="circle" width="116" height="116"
                    :src="item.user?.avatar ?? '/static/images/user/ic_def_avatar.png'"
                    @click="toHomePage(item.user_id)"></u-image>
                  <view class="tag-identity" :style="{ backgroundColor: tagColor[item.member_position - 1] }">
                    {{ item.is_management ? '客户经理' : formatIdentity(item.member_position) }}
                  </view>
                </view>
                <view class="c-#666 text-28 mt-2  text-center w-full text-single" @click="toHomePage(item.user_id)">{{
                  item.user?.nickname ?? '-' }}</view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="bg-#F5F5F5 w-full h-12"></view>
        <!-- 操作栏 -->
        <view class="px-4 flex flex-col w-full">
          <view v-for="(item, index) in optionList" :key="index">
            <view class="option-item h-86"
              @click="navigate(`${item.url}?club_id=${state.club_id}&member_position=${state.member_position}&memberNum=${state.detailData?.info?.member_number}`)">
              <view class="font-bold">{{ item.title }}</view>
              <view class="flex items-center ">
                <image v-if="index == 1" class="w-26 h-26" src="/static/images/home/ic_qrcode.png"></image>
                <view v-if="index == 2" class="c-#666">{{ state.detailData?.info?.member_number }}人</view>
                <image class="w-14 h-24 ml-2" src="/static/images/home/ic_more.png"></image>
              </view>
            </view>
            <u-line v-if="index != optionList.length - 1" :hair-line="false" color="#F5F5F5" />
          </view>
        </view>
        <view class="bg-#F5F5F5 w-full h-12"></view>
        <view v-if="state.member_position == 3" class="px-4"
          @click="navigate(`/package_society/pages/society/auto_reply?club_id=${state.club_id}`)">
          <view class="option-item mt-3">
            <view class="font-bold">成员加入自动回复</view>
            <image class="w-14 h-24 ml-2" src="/static/images/home/ic_more.png"></image>
          </view>
          <view class="mt-1 c-#666">{{ state.detailData?.info?.response }}</view>
          <u-line margin="24rpx 0 0 0" :hair-line="false" color="#F5F5F5" />
        </view>

        <view v-if="state.member_position == 3" class="px-4"
          @click="navigate(`/package_society/pages/society/invite?club_id=${state.club_id}&qrcode_end_time=${state.detailData.info.qrcode_end_time}&qrcode_open=${state.detailData.info.qrcode_open}&qrcode_start_time=${state.detailData.info.qrcode_start_time}`)">
          <view class="option-item mt-3">
            <view class="font-bold">邀请码设置</view>
            <image class="w-14 h-24 ml-2" src="/static/images/home/ic_more.png"></image>
          </view>
          <u-line margin="24rpx 0 0 0" :hair-line="false" color="#F5F5F5" />
        </view>
        <!-- 社长/成员不同模块 -->
        <view v-if="state.targetData" class="px-4">
          <view class="my-3 c-#333 text-32 font-bold">我的年度业绩规划</view>
          <view class="flex items-center mb-6">
            <view class="relative mr-5 w-374 h-230">
              <image class="absolute z-1 w-374 h-230" src="/static/images/home/bg_member.png"></image>
              <view class="absolute z-2 left-40 top-50 c-white">
                <view class="text-60 font-bold">{{ state.targetData?.annual_target ?
                  parseFloat(state.targetData?.annual_target).toFixed(2) : 0 }}W</view>
                <view class="text-28 opacity-80">总目标（{{ state.targetData?.currency ? '美元' : '元' }}）</view>
              </view>
            </view>
            <view class="flex-1 flex flex-col justify-center">
              <view class="flex items-center c-#333 text-32">
                <view class="font-bold">{{ state.targetData?.finish_money ?
                  parseFloat(state.targetData?.finish_money).toFixed(2) : 0 }}W</view>
                <view class="ml-2 text-24 c-#999">({{ state.targetData?.percentage_complete }}%)</view>
              </view>
              <view class="mt-1 mb-2 c-#999 text-28">已完成目标（{{ state.targetData?.currency ? '美元' : '元' }}）</view>
              <view class="c-#333 text-32 font-bold">{{ state.targetData?.order_number }}</view>
              <view class="mt-1 mb-2 c-#999 text-28">成单次数(次)</view>
            </view>
          </view>
          <!-- 业绩列表 -->
          <view v-for="(item, index) in state.list" :key="index" class="achievement-item">
            <view class="flex flex-col justify-center">
              <view class="c-#333 text-32 font-bold">业绩完成金</view>
              <view class="c-#999 text-28 mt-1">{{ item.deal_time }}</view>
            </view>
            <view class="c-#F4AF22 text-32">{{ state.targetData?.currency == 0 ? '￥' : '$' }}{{ item.money }}</view>
          </view>
        </view>
      </view>
    </z-paging-list>
  </view>
</template>

<script setup>
import { navigate } from '@/common/util/uni'
import { formatIdentity, toHomePage } from '@/common/util/util'
import { getMemberDetail, getMemberMyTarget, getMemberPerformanceRecord } from "@/common/http/module/society.js";

const list = ref();
const state = reactive({
  club_id: '', // 学社id
  member_position: '', // 用户在该学社身份
  detailData: null, // 学社详情数据
  targetData: null,
  isMember: false, // 是否是成员
  memberList: [
    { name: '随便吧', identity: 0 },
    { name: '随便吧', identity: 1 },
    { name: '随便吧随便吧随便吧', identity: 2 },
  ],
  list: []
})

// 身份标签颜色 1-顾问 2-管理员 3-社长 
const tagColor = ['#F8DC61', '#6FC9E7', '#F4AF22']


const optionList = [
  { title: '', url: '' },
  { title: '学社名片', url: '/package_society/pages/society/card' },
  { title: '成员列表 ', url: '/package_society/pages/member/list' },
]

// 获取管理详情
function loadDetail() {
  getMemberDetail(state.club_id).then((res) => {
    state.detailData = res.data;
  });
}

// 获取成员年度规划
async function loadTargetData() {
  // if (state.member_position == 3) return
  const { data } = await getMemberMyTarget(state.club_id)
  state.targetData = data
}

function loadData(page) {
  // if (state.member_position == 3) return
  getMemberPerformanceRecord(state.club_id, page).then(res => {
    list.value.onLoadResult(page ? res.data?.data : []);
  })
}

onLoad((options) => {
  state.club_id = options.club_id
  state.member_position = options.member_position
  optionList[0].title = state.member_position == 3 ? '编辑资料' : '学社资料'
  optionList[0].url = state.member_position == 3 ? '/package_society/pages/society/edit' : '/package_society/pages/member/material'
  loadDetail()
  loadTargetData()
  loadData;
});

defineExpose({ loadDetail, loadData })
</script>

<style lang="scss" scoped>
.scroll-view-item {
  display: inline-block;
  width: 140rpx;
  height: 232rpx;
  margin-right: 26rpx;
  overflow: hidden;
}

.scroll-view-item:last-child {
  margin-right: 0;
}

.tag-identity {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 104rpx;
  padding: 2rpx 16rpx;
  color: #FFFFFF;
  font-size: 20rpx;
}

.option-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  font-size: 28rpx;
  font-family: PingFangSC-Medium;
}

.achievement-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 2rpx solid #F5F5F5;
}
</style>
